<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/sks/cms/page/share/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<% String path = request.getContextPath(); 
   String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="租房,买房,三棵松,地产,中介" />
<meta name="description" content="三棵松地产" />
<title>三棵松地产</title>
<link rel="stylesheet" type="text/css" media="screen" href="<%=basePath %>sks/css/frontpages/common.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=basePath %>sks/css/frontpages/indexNew.css" />
<script type="text/javascript" src="<%=basePath %>sks/js/frontpages/select2css.js"></script>
<script type="text/javascript">
	var oldSpanId, oldSubSpanId, oldTrigonId, oldNablaId,oldlabelId ;
	function setShowSubAreaIds(newSpanId, newSubSpanId, newTrigonId, newNablaId, newlabelId) {
		oldSpanId = newSpanId;
		oldSubSpanId = newSubSpanId;
		oldTrigonId = newTrigonId;
		oldNablaId = newNablaId;
		oldlabelId = newlabelId;
	}
	function myLoad() {
		selectOnload();	
		balanceHeight();
	}
	function down(spanId, subSpanId, trigonId, nablaId, labelId ) {
		if ( spanId == null || subSpanId == null || trigonId == null || nablaId == null ) {
			return;
		}
    	document.getElementById(spanId).onmouseover=function(){}; 
    	document.getElementById(spanId).onmouseout=function(){}; 
    	if ( oldSpanId != spanId) {
	    	up( oldSpanId, oldSubSpanId, oldTrigonId, oldNablaId, oldlabelId );
	    	if ( oldTrigonId != null ) {
		    	document.getElementById(oldNablaId).style.display='none'; 
	    	}
    		setShowSubAreaIds( spanId, subSpanId, trigonId, nablaId, labelId );
    	}
    	document.getElementById(labelId).style.fontWeight='bold';  
    	document.getElementById(subSpanId).style.display=''; 
    	document.getElementById(nablaId).style.display='none'; 
    	document.getElementById(trigonId).style.display='';
    	balanceHeight();
    }
    function up(spanId, subSpanId, trigonId, nablaId, labelId) {
    	if ( spanId == null || subSpanId == null || trigonId == null || nablaId == null || labelId == null) {
			return;
		}
    	document.getElementById(subSpanId).style.display='none';
    	document.getElementById(trigonId).style.display='none'; 
    	document.getElementById(labelId).style.fontWeight='normal'; 
    	document.getElementById(spanId).onmouseover=function(){showTrigon(nablaId)};
    	document.getElementById(spanId).onmouseout=function(){hideTrigon(nablaId)};
    	document.getElementById(nablaId).style.display='';
    	balanceHeight();
    }
    function  showTrigon(id) {
    	document.getElementById(id).style.display='';
    } 
    function hideTrigon(id) {
    	document.getElementById(id).style.display='none';
    }

    function escapeTitle() {
    	var t = document.houseForm.keyWord;
    	t.value = escape(document.houseForm.title.value);
    }

    function unescapeTitle() {
    	var t = document.houseForm.keyWord;
    	t.value = unescape(t.value);
    }

    function submitHouseForm() {
        var houseForm = document.getElementById('houseForm');
        if (null != houseForm) {
        	escapeTitle();
        	document.charset='UTF-8';
        	houseForm.submit();
        }
    }
    function setArea(areaId, topAreaId) {
    	var houseForm = document.getElementById('houseForm');
    	if (null == houseForm) {
        	return;
    	}
    	houseForm.areaId.value = areaId;
    	houseForm.topAreaId.value = topAreaId;
    	submitHouseForm();
    }
    function setHouseType(ht) {
    	var houseForm = document.getElementById('houseForm');
    	if (null == houseForm) {
        	return;
    	}
    	houseForm.houseTypeId.value = ht;
    	submitHouseForm();
    }
    function setPropertyType(pt) {
    	var houseForm = document.getElementById('houseForm');
    	if (null == houseForm) {
        	return;
    	}
    	houseForm.propertyTypeId.value = pt;
    	submitHouseForm();
    }
    function setPrice(minPrice, maxPrice) {
    	var houseForm = document.getElementById('houseForm');
    	if (null == houseForm) {
        	return;
    	}
    	houseForm.minPrice.value = minPrice;
    	houseForm.maxPrice.value = maxPrice;
    	submitHouseForm();
    }
    
    function balanceHeight(){
     	var con1=document.getElementById("leftBox"); 
     	var con2=document.getElementById("rightBox"); 
      	con2.style.height=con1.offsetHeight-12+"px";  
    	
    }
</script>
</head>

<body onload="myLoad();">
<!-- wrap starts here -->
<div class="wrap">
	<jsp:include page="header.jsp"></jsp:include>
	<!-- content-wrap starts here -->
	<div class="content-wrap">													
		<div class="main">
			<div class="box" id="leftBox">
			<form action="/sks/house.do" name="houseForm" id="houseForm" method="get" accept-charset="UTF-8" onsubmit="escapeTitle();">
			<input type="hidden" name="method" value="list"/>
			<input type="hidden" name="areaId"/>
			<input type="hidden" name="topAreaId"/>
			<input type="hidden" name="houseTypeId"/>
			<input type="hidden" name="propertyTypeId"/>
			<input type="hidden" name="minPrice"/>
			<input type="hidden" name="maxPrice"/>
			<input type="hidden" name="keyWord" value="<%=request.getParameter("keyWord")%>"/>
			    <div class="col">
			    	<div id="uboxstyle" class="float-left">
						<select name="menuName" id="searchType" onchange="changeSearchType();" style="padding-top: 5px; padding-bottom: 5px; height: 29px;">
							<option value="houseListRent" selected="selected">租房</option>
							<option value="houseListBuy">买房</option>
						</select>
					</div>
					<div>
					<input class="keySearch" name="title" type="text"/>
					<input class="button" type="button" onclick="submitHouseForm();" value="搜房" />
					</div>
	            </div>
	        
				<div class="col noRight">
					<label>区域：</label>
					<c:forEach var="area" items="${tops}">
					<span id="ta_${area.areaId}Span" style="display:-moz-inline-box; display:inline-block;width:65px;"
						onmouseover="showTrigon('ta_${area.areaId}_down')"
						onmouseout="hideTrigon('ta_${area.areaId}_down')">
					<a id="ta_${area.areaId}_label" href="javascript:;" onclick="setArea(null, ${area.areaId});" style="cursor:hand;" title="${area.name}" hidefocus="true">${area.name}</a>
					<a id="ta_${area.areaId}_down" style="display: none;" href="javascript:;" onclick="down('ta_${area.areaId}Span', 'ta_${area.areaId}', 'ta_${area.areaId}_up', 'ta_${area.areaId}_down', 'ta_${area.areaId}_label');" hidefocus="true" >▼</a>
					<a id="ta_${area.areaId}_up" style="display: none;" href="javascript:;" onclick="up('ta_${area.areaId}Span', 'ta_${area.areaId}', 'ta_${area.areaId}_up', 'ta_${area.areaId}_down', 'ta_${area.areaId}_label');" hidefocus="true" >▲</a>
					</span>
					</c:forEach>
					
					<c:forEach var="area" items="${tops}">
					<div id="ta_${area.areaId}" style="display: none; " >
					    <span style="display:-moz-inline-box; display:inline-block;width: 50px;background: #FFF;" ></span>
					    <div style="border: 1px solid #9EC068; background: #FFF;  padding: 3px; margin-top: 5px; margin-left: 50px;margin-right: 30px; ">
					    <c:forEach var="a" items="${area.areas}">
						<a href="javascript:;" onclick="setArea(${a.areaId}, ${area.areaId});" title="${a.name}" style="cursor:hand;" hidefocus="true">${a.name}</a>
						<span style='display:-moz-inline-box; display:inline-block;width: 10px;'></span>
						</c:forEach>
						</div>
					</div>
					</c:forEach>
				</div>
				<div class="col">
						<label>房价：</label>
						<span id="rentingPrice">
						<a href="javascript:setPrice(0, 500);" title="500" hidefocus="true">500以下</a>
						<a href="javascript:setPrice(500, 1000);" title="500-1000" hidefocus="true">500-1000</a>
						<a href="javascript:setPrice(1000, 2000);" title="1000-2000" hidefocus="true">1000-2000</a>
						<a href="javascript:setPrice(2000, 3000);" title="2000-3000" hidefocus="true">2000-3000</a>
						<a href="javascript:setPrice(3000, 4000);" title="3000-4000" hidefocus="true">3000-4000</a>
						<a href="javascript:setPrice(4000, 5000);" title="4000-5000" hidefocus="true">4000-5000</a>
						</span>
						<span id="buyPrice">
						<a href="javascript:setPrice(0, 500);" title="2000" hidefocus="true">2000以下</a>
						<a href="javascript:setPrice(0, 500);" title="2000-3000" hidefocus="true">2000-3000</a>
						<a href="javascript:setPrice(0, 500);" title="3000-5000" hidefocus="true">3000-5000</a>
						<a href="javascript:setPrice(0, 500);" title="5000-8000" hidefocus="true">5000-8000</a>
						<a href="javascript:setPrice(0, 500);" title="8000-10000" hidefocus="true">8000-10000</a>
						<a href="javascript:setPrice(0, 500);" title="10000-15000" hidefocus="true">10000-15000</a>
						</span>
						<a href="javascript:submitHouseForm();" title="更多" hidefocus="true">更多</a>
						<br/>
					</div>
				<div class="col">
					<label>户型：</label>
					<c:forEach var="ht" items="${hts}">
					<a href="javascript:setHouseType(${ht.houseTypeId});" title="${ht.name}" hidefocus="true">${ht.name}</a>
					</c:forEach>
				</div>
				<div class="col">
					<label>类型：</label>
					<c:forEach var="pt" items="${ppts}">
                       <a href="javascript:setPropertyType('${pt.propertyTypeId}');" title="${pt.name}"
                       <c:if test="${pt.propertyTypeId eq houseForm.propertyTypeId}">style="font-weight:bold"</c:if> hidefocus="true">${pt.name}</a>
                    </c:forEach>
				</div>
		    </form>
		    </div>
		</div>	
		<div class="rightbar">
			<div class="box" id="rightBox">
			<input class="button" style="width: 151px; height: 37px; margin: 10px 30px;" type="button" onclick="window.location.href = '<%=basePath%>sks/frontpages/privilege/deployment/manage.do?method=addUI'" value="个人发布房源" />
			<input class="button" style="width: 151px; height: 37px; margin: 10px 30px;" type="button" onclick="window.location.href = '<%=basePath%>sks/message.do?method=addUI'" value="委托找房" />
			</div>
		</div>			
			
	<!-- content-wrap ends here -->		
	</div>
	
	<div class="content-wrap">
		<div class="box" style="height: 222px" >
		<label>推荐房源</label>
		<ul class="list_ul_dow_rec">
		<c:forEach var="house" items="${hs}">
			<li>
				<dl>
					<dt>
					<a href="/sks/house.do?method=info&houseId=${house.houseId}" _soj="list_new" title="${house.title}" target="_blank" hidefocus="true">
					<c:if test="${fn:length(house.pictures) > 0}"><img alt="${house.title}" src="<%=basePath%>${house.pictures['0'].fullPathName}"/></c:if>
					<c:if test="${fn:length(house.pictures) <= 0}"><img alt="${house.title}" src="<%=basePath%>images/no_house.jpg"/></c:if>
					</a></dt>
					<dd><a href="/sks/house.do?method=info&houseId=${house.houseId}" _soj="list_new" title="${house.title}" target="_blank">${house.title}</a></dd>
					<dd style="text-align: right;">${house.houseType.name}</dd>
					<dd class="yellow" style="text-align: right;">
					<c:if test="${house.transaStatus == 0 || house.transaStatus == 2}">
						${house.rentPrice}/月
					</c:if>
					<c:if test="${house.transaStatus == 1}">
						${house.salePrice}/平米
					</c:if>
					</dd>
					<dd></dd>
				</dl>
			</li>
		</c:forEach>
		</ul>
		</div>
	</div>
	
	<div class="content-wrap">
		<div class="box" style="height: 185px" >
		<label>优秀经纪人</label>
		<ul class="list_ul_dow_rec">
		<c:forEach var="employee" items="${employee}">
			<li style="width: 290px; border: 1px solid #CCCCCC;">
			    <div class="float-left" style="margin:5px;">
					<a href="#" _soj="list_new" title="${employee.username}" target="_blank" hidefocus="true">
					<c:if test="${!empty employee.imagePath}">
					<img style="vertical-align:middle;" height="120" src="${house.employee.imagePath}"/>
					</c:if>
					<c:if test="${empty employee.imagePath}">
					<img style="vertical-align:middle;" height="120" src="<%=basePath%>images/noAavtar.jpg"/>
					</c:if>
					</a>
			    </div>
			    <br/>
				<a style="font-size: 18px;" href="#" _soj="list_new" title="${employee.username}" target="_blank">${employee.username}</a>
				${house.houseType.name}
				<br/><br/>
				<span style="font-size: 20px; ">${employee.phone}</span>
			</li>
		</c:forEach>
		</ul>
		</div>
	</div>
	
	<div class="content-wrap">
		<div class="box" style="height: 120px" >
		<label>最新资讯</label>
		<div class="float-left" style="width: 49%">
		<ul>
		<c:forEach items="${news}" var="entry" begin="0" end="3" step="1">
			<li style="float: right ; list-style-type: none;"><fmt:formatDate value="${entry.publishTime}" pattern='yyyy-MM-dd' /></li>
			<li >
				<a href="/sks/news.do?method=infoList&menuName=newsIndex&newsId=${entry.newsId}" title="${entry.title}" target="_blank">
				<c:if test="${fn:length(entry.title) > 25}">
				${fn:substring(entry.title, 0, 25)}...
				</c:if>
				<c:if test="${fn:length(entry.title) <= 25}">
				${entry.title}
				</c:if>
				</a>
			</li>
		</c:forEach>			
		</ul>
		</div>
		<div class="float-left" style="width: 49%">
		<ul>
		<c:forEach items="${news}" var="entry" begin="4" end="7" step="1">
			<li style="float: right ; list-style-type: none;"><fmt:formatDate value="${entry.publishTime}" pattern='yyyy-MM-dd' /></li>
			<li>
				<a href="/sks/news.do?method=infoList&menuName=newsIndex&newsId=${entry.newsId}" title="${entry.title}" target="_blank">
					<c:if test="${fn:length(entry.title) > 25}">
					${fn:substring(entry.title, 0, 25)}...
					</c:if>
					<c:if test="${fn:length(entry.title) <= 25}">
					${entry.title}
					</c:if>
				</a>				
			</li>
		</c:forEach>	
		</ul>
		</div>
		</div>
	</div>

<!-- footer starts here -->	
<jsp:include page="rooster.jsp"></jsp:include>
<!-- footer ends here -->

</div>
</body>
</html>
